<script setup>
    import {ref} from "vue"
    const x = ref(0)
</script>

<template>
    <div class="outer">
        <div class="inner" style="width: '${x/4*100}'+'%'">
            50%
        </div>
   </div>
   <br>
   <button @click="x = 1">设置为25%</button>
   <button @click="x = 2">设置为50%</button>
   <button @click="x = 3">设置为75%</button>
   <button @click="x = 4">设置为100%</button>
</template>

<style scoped>
    * {
        padding: 0;
        margin: 0;
    }
    .outer {
        width: 550px;
        height: 35px;
        border-radius: 2em;
        background-color: #251d1d;
        display: flex;
        align-items: center;
    }
    .inner {
        margin: 0 2px;
        height: 31px;
        border-radius: 2em;
        background-color: #0763a0; 

        font-family: "幼圆";
        font-weight: 600;
        text-align: center;
        line-height: 30px;
        color: aliceblue;
    }
</style>